<template>
  <header class="navbar">
    <div class="navbar__logo">
      <!-- Logo 图标或文字 -->
      <router-link></router-link>

    <nav class="navbar__menu">
      <router-link v-for="item in items" :key="item.path" :to="item.path" class="menu-item">{{ item.name }}</router-link>
    </nav>
    <!-- 可能的用户信息、登录/注册按钮等 -->
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue';

// 假设这是你的菜单项数据
const items = ref([
  { name: '首页', path: '/' },
  { name: '关于', path: '/about' },
  // 更多菜单项...
]);
</script>

<style scoped>
.navbar {
  /* 样式定义 */
}
.navbar__logo {
  /* Logo样式 */
}
.navbar__menu {
  /* 菜单样式 */
}
.menu-item {
  /* 单个菜单项样式 */
}
/* 添加更多样式 */
</style>